<template>
  <div id="cardstorage" class="same-change-oldstyle">
    <div class="cardstoragewrap">
	   <div class="same-head-box" >
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/cardWarehouse' }">卡库管理</el-breadcrumb-item>
						<el-breadcrumb-item>水卡入库</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<!-- <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button> -->
            		<button class="same-search-btns" @click="returnBack">返回</button>	
				</div>
			</div>
		</div>

      <div class="dkqwrap">
        <p>
          读卡器状态：
          <span :class=" state == '未连接' ? 'red' : 'green' ">{{state}}</span>
        </p>
        <div class="textareawrap">
          <div class="toptitle">
            <span>水卡卡号：</span>
            <span>已录入水卡：{{cardnums}}张</span>
          </div>
          <textarea
            rows="25"
            v-model="cardnum"
            @blur="cardnumarr()"
            onkeyup="this.value=this.value.replace(/[^\r\n0-9\,]/g,'');"
          ></textarea>
          <p class="remarks">
            备注：
            <span>请输入或者用读卡器读取水卡卡号，每行一条10位数卡号(不满10位时会在前面自动添加0)，有多个卡号的需要多行输入；每次最多提交100张卡。</span>
          </p>
          <button @click="tj">提交</button>
        </div>
      </div>
    </div>

    <!--弹窗-->
    <div v-show="is_show" class="submodel">
      <p class="successtxt">提交成功！</p>
      <p>本次共录入{{result.total}}张水卡，其中有{{result.success}}张录入成功，</p>
      <p>{{result.existence}}张已存在，{{result.repeat}}张重复录入。</p>
    </div>
  </div>
</template>

<script>
function dkq() {
  let script1 = document.createElement("script");
  script1.src = "http://127.0.0.1:8008/YOWOCloudRFIDReader.js";
  document.body.appendChild(script1);
  let script2 = document.createElement("script");
  script2.src = "../../../static/js/dkq.js";
  document.body.appendChild(script2);
}
export default {
  name: "cardstorage",
  data: function() {
    return {
      cardnum: "",
      is_show: false,
      cardnums: 0,
      result: {
        total: 0,
        success: 0,
        existence: 0,
        repeat: 0
      },
      state: "未连接"
    };
  },

  created: function() {
    var that = this;
    this.script();
    setTimeout(function() {
      that.Start();
    }, 2 * 1000);
  },
  inject: ['reload'],
  methods: {
	RefreshFun(){
		// 调用reload方法，刷新整个页面
		this.reload()
	},
	//返回
	returnBack(){
		this.$router.back(-1);
	},
    script: dkq,
    Start() {
      var that = this;
      that.getcardnum();
      rfidreader.Repeat = 1;
      rfidreader.HaltAfterSuccess = 1;
      rfidreader.RequestTypeACardNo(1, 0);
    },
    Stop() {
      console.log("取消");
      var that = this;
      rfidreader.Repeat = 0;
      rfidreader.RequestTypeACardNo(1, 0);
    },
    getcardnum() {
      var that = this;
      rfidreader.onResult(function(resultdata) {
        console.log(resultdata);
        switch (resultdata.FunctionID) {
          case 0:
            if (resultdata.Result > 0) {
              var card = (
                Array(10).join(0) + parseInt(resultdata.CardNo, 16)
              ).slice(-10);
              if (that.cardnum.indexOf(card + ",") == -1) {
                that.cardnum += card + ",\n";
                that.cardnumarr();
              }
              if (resultdata.Result != -1) {
                that.state = "已连接";
              }
            } else {
              // that.$message({
              // 	type: 'warning',
              // 	showClose: true,
              // 	message: GetErrStr(resultdata.Result),
              // 	center: true
              // });
            }
            break;
        }
      });
    },
    //获取卡号的数量
    cardnumarr() {
      var that = this;
      var str = this.cardnum.replace(/[\r\n]/g, ","); //去除回车符号
      var cards = str.split(","); //字符串分隔成数组
      cards = cards.filter(item => item); //去除数组中的空元素
      that.cardnums = cards.length;
      return cards;
    },
    tj() {
      var that = this;
      var cards = that.cardnumarr();
      that.$post({
        url: "Partner/WaterCard/addCards",
        data: {
          cards: cards
        },
        success: data => {
          if (data.code == 1000) {
            that.result = data.data;
            that.is_show = true;
          } else {
            that.$message({
              type: "error",
              showClose: true,
              message: data.message,
              center: true
            });
          }
        }
      });
    }
  },
  mounted() {},
  watch: {},
  computed: {},
  beforeDestroy() {
    this.Stop();
  }
};
</script>

<style>
#cardstorage textarea {
  resize: none;
  width: 100%;
  margin: 10px 0;
}

#cardstorage .toptitle {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

#cardstorage .dkqwrap {
  padding: 10px 40px;
  /*background: #F2F3F3;*/
}

#cardstorage .textareawrap {
  width: 300px;
}

#cardstorage .remarks {
  font-size: 14px;
  color: #bf1a20;
}

#cardstorage .remarks span {
  color: #333;
}

#cardstorage .textareawrap button {
  margin-top: 15px;
  width: 100%;
  right: 0;
  top: 15px;
  height: 40px;
  line-height: 40px;
  padding: 0 25px;
  background-color: #2c5586;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
}

#cardstorage .submodel {
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 500px;
  height: 250px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  position: absolute;
  line-height: 30px;
  box-shadow: 0 0 5px #888888;
}

#cardstorage .submodel .successtxt {
  color: #2c5586;
  font-size: 20px;
  margin-bottom: 20px;
}

#cardstorage .red {
  color: #bc1b21;
}

#cardstorage .green {
  color: #29af6b;
}
</style>
